<div>
    <div class="head">
        <img src="https://littleshop.oss-cn-beijing.aliyuncs.com/images/wap/wap-register-head.png" alt="">
    </div>
    <div class="form">
        <form wire:submit.prevent="submit">
            <div class="inputs">
                <div class="input"><input type="text" wire:model="phone" placeholder="请输入手机号"></div>
                
                <div class="code">
                    <div><input type="text" wire:model="sms_code" placeholder="请输入验证码"></div>
                    <div><button type="button" wire:click="send" onclick="countdown(this)">发送验证码</button></div>
                </div>
                <div><input type="hidden" wire:model="sms_key"></div>
            </div>
            <div class="note">
                @if(session()->has('message'))
                    <div>{{ session('message') }}</div>
                @endif
            </div>
            <div class="validate">
                @error('phone') <div class="error">{{ $message }}</div> @enderror
                @error('sms_key') <div class="error">{{ $message }}</div> @enderror
                @error('sms_code') <div class="error">{{ $message }}</div> @enderror
            </div>
            <div class="submit">
                <div class="agreement">
                    <input type="checkbox" checked>
                    我已阅读并同意
                    <a href="{{ route('wap.configs.user.agreement') }}">《用户协议》</a>和
                    <a href="{{ route('wap.configs.user.privacy') }}">《隐私协议》</a>
                </div>
                <div class="operate"><button class="button" type="button" wire:click="submit">立即注册</button></div>
            </div>
        </form>
    </div>
    <div class="download">
        <a href="{{ cs('app')->ios_url }}" class="ios">
            <img src="https://littleshop.oss-cn-beijing.aliyuncs.com/images/wap/wap-download-ios.png" alt="">
            <span>IPhone版下载</span>
        </a>
        <a href="{{ cs('app')->android_url }}" class="android">
            <img src="https://littleshop.oss-cn-beijing.aliyuncs.com/images/wap/wap-download-android.png" alt="">
            <span>Andriod版下载</span>
        </a>
    </div>
</div>
<script>
    function countdown(button) {
    	let timer = 60;
        let interval = setInterval(function () {
        	button.setAttribute('disabled', true);
        	timer--;
        	button.innerHTML = '(' + timer + ')秒后再试';
        	if (timer === 0) {
        		clearInterval(interval);
		        button.innerHTML = '发送验证码';
        		button.removeAttribute('disabled');
        		timer = 60;
            }
        }, 1000)
    }
</script>
<style>
    .head img {width: 100%; max-width: 100%}
    .form {padding: 20px}
    .form .note div {
        margin-top: 10px;
        padding: 5px 0;
        color: white;
        font-size: 18px;
        text-align: center;
        background: #F9B610;
        border-radius: 20px;
    }
    .form .validate .error {
        margin-top: 10px;
        padding: 5px 0;
        color: white;
        font-size: 18px;
        text-align: center;
        background: #F9B610;
        border-radius: 20px;
    }
    .form .inputs .input {
        width: 100%;
        height: 44px;
        background: #FFFFFF;
        border-radius: 44px;
        border: 1px solid #979797;
        margin-top: 15px;
        overflow: hidden;
    }
    .form .inputs .input input {
        width: 90%;
        height: 42px;
        line-height: 45px;
        margin-left: 20px;
        margin-right: 50px;
        border: none;
        font-size: 18px;
    }
    .form .inputs .code {
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 44px;
        background: #FFFFFF;
        border-radius: 44px;
        border: 1px solid #979797;
        margin-top: 15px;
        overflow: hidden;
    }
    .form .inputs .code input {
        width: 90%;
        height: 42px;
        line-height: 45px;
        margin-left: 20px;
        margin-right: 50px;
        border: none;
        font-size: 18px;
    }
    .form .inputs .code button {
        height: 45px;
        padding: 0 20px;
        border: none;
        color: white;
        background: #555555;
        border-radius: 44px;
        white-space: nowrap;
    }
    .submit .agreement {
        margin-top: 80px;
        margin-bottom: 10px;
    }
    .submit .operate {
        width: 300px;
        margin: 0 auto;
    }
    .submit .operate .button {
        width: 100%;
        height: 44px;
        margin: 0 auto;
        background: #333333;
        border-radius: 22px;
        font-size: 14px;
        color: #FFFFFF;
    }
    .download {
        padding: 20px;
        background: #FFE066;
        display: flex;
        justify-content: space-between;
    }
    .download .ios {
        width: 150px;
        height: 50px;
        border-radius: 6px;
        border: 1px solid #333333;
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-size: 18px;
        color: #333333;
    }
    .download .ios img {
        width: 21px;
        height: 26px;
    }
    .download .android {
        width: 150px;
        height: 50px;
        border-radius: 6px;
        border: 1px solid #333333;
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-size: 18px;
        color: #333333;
    }
    .download .android img {
        width: 22px;
        height: 26px;
    }
</style>
